#{extends 'main.html' /}
#{set title:'Register' /}

<link rel="stylesheet" type="text/css" href="/public/stylesheets/register.css"/>
<script type="text/javascript">
$(document).ready(function() {
	$("#newuser").wijwizard();
	$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
	$(":input[type='button'],:input[type='submit']").button();
	
	$("#userEmail").focusout(function(){
		checkInfo1("userEmail", "emailErrorInfo");
	});
	$("#userPassword").focusout(function(){
		checkInfo2("userPassword", "pswErrorInfo");
	});
	$("#rPassword").focusout(function(){
		checkInfo3("rPassword", "rpswErrorInfo");
	});
});
function showNote(id1, id2) {
	$("#"+id1).toggleClass("init-hidden");
	$("#"+id2).html("");
}
function hideNote(id1, id2) {
	$("#"+id1).toggleClass("init-hidden");
	switch(id2) {
		case 'emailErrorInfo':
			$("#"+id2).html("Please enter a valid email address");
			break;
		case 'pswErrorInfo':
			$("#"+id2).html("Please enter a valid password");
			break;
		case 'rpswErrorInfo':
			$("#"+id2).html("Please enter an equal password");
			break;
	}	
}

function checkInfo1(id1, id2) {
	var rege = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	val = $("#"+id1).val().match(rege);
	if(val) {//success
		$("#"+id2).hide();
		$.post('/Register/emailExistsJSON', {e: $("#"+id1).val()}, function(data) {
			if(data) {
				$(".register-email-info").attr('src', '../../../public/images/reject.png');
				$("#"+id2).html("This email exited, please input other one");
				$("#"+id2).show();
			} else {
				$(".register-email-info").attr('src', '../../../public/images/accept.png');
			}
			
		});
	} else {//failed
		$(".register-email-info").attr('src', '../../../public/images/reject.png');
		$("#"+id2).show();
	}
}
function checkInfo2(id1, id2) {
	if(($("#"+id1).val().length>=6)&&($("#"+id1).val().length<=16)) {
		$(".register-ps-info").attr('src', '../../../public/images/accept.png');
		$("#"+id2).hide();
	} else {
		$(".register-ps-info").attr('src', '../../../public/images/reject.png');
		$("#"+id2).show();
	}
}
function checkInfo3(id1, id2) {
	if($("#"+id1).val()==$("#userPassword").val()) {
		$(".register-rps-info").attr('src', '../../../public/images/accept.png');
		$("#"+id2).hide();
	} else {
		$(".register-rps-info").attr('src', '../../../public/images/reject.png');
		$("#"+id2).show();
	}
}
</script>
<script type="text/javascript" href="/public/javascripts/register.js"></script>
<div id="newuser">
	<ul>
		<li>
			<h1>Step 1</h1>
<!--put some text under Step1 tab if nessary-->
		</li>
		<li>
			<h1>Step 2</h1>
<!--put some text under Step1 tab if nessary-->
		</li>
		<li>
			<h1>Step 3</h1>
<!--put some text under Step1 tab if nessary-->
		</li>
	</ul>
	<div>
		<div id="register-frame">
			<div id="register-title" class="div-title">Register</div>
			<div id="register-container" class="div-container">
				<form>
					<label for="email">Email</label><span class="red">*</span><br />
					<input type="text" name="email" value="" id="userEmail" size="27" class="">
					<a href="#" class="email-info" onmouseover="showNote('emailInfo', 'emailErrorInfo')" onmouseout="hideNote('emailInfo', 'emailErrorInfo')">
					<img src="../../../public/images/help.png" class="register-email-info" /></a>
					<span id="emailInfo" class="init-hidden">Example: jams@gmail.com</span>
					<span id="emailErrorInfo" class="init-hidden error">Please enter a valid email address</span><br />
					
					<label for="password">Password</label><span class="red">*</span><br />	
					<input type="password" name="password" value="" id="userPassword" size="27" class="">
					<a href="#" class="ps-info" onmouseover="showNote('pswInfo','pswErrorInfo')" onmouseout="hideNote('pswInfo','pswErrorInfo')">
					<img src="../../../public/images/help.png" class="register-ps-info"/></a>
					<span id="pswInfo" class="init-hidden">Password size should be 6-16</span>
					<span id="pswErrorInfo" class="init-hidden error">Please enter a valid password</span><br />
					
					<label for="password">Re-type your password</label><span class="red">*</span><br />
					<input type="password" name="password" value="" id="rPassword" size="27" class="">
					<a href="#" class="rps-info" onmouseover="showNote('rpswInfo','rpswErrorInfo')" onmouseout="hideNote('rpswInfo','rpswErrorInfo')">
					<img src="../../../public/images/help.png" class="register-rps-info"/></a>
					<span id="rpswInfo" class="init-hidden">Retype the same password</span>
					<span id="rpswErrorInfo" class="init-hidden error">Please enter an equal password</span><br />
					<input type="submit" value="Register" id="submit">
				</form>
			</div>
		</div>	
	</div>
	<div>
		<p class="init-hidden">

			Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra

			massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget

			luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean

			aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent

			in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat

			nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque

			convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod

			felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>

	</div>
</div>